<template>
  <div class="header">
    <div class="header-container">
      <div class="logo-section">
        <img src="../assets/image/logo.png" alt="Logo">
      </div>
      <nav class="nav-menu">
        <div 
          v-for="(item, index) in menuItems" 
          :key="index"
          @click="toPage(item.route)"
          :class="['nav-item', $route.path === item.path ? 'active' : '']"
        >
          <i :class="item.icon"></i>
          {{ item.name }}
        </div>
      </nav>
      <div class="user-section">
        <img 
          @click="toCenter" 
          class="avatar"
          :src="userAvatar"
          :alt="userInfo.userName || '用户头像'"
        >
        <el-button 
          type="danger" 
          size="small" 
          icon="el-icon-switch-button" 
          @click="loginOut"
        >退出</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { name: '系统主页', route: 'index', path: '/', icon: 'el-icon-s-home' },
        { name: '景点信息', route: 'attractions', path: '/attractions', icon: 'el-icon-location' },
        { name: '旅游线路', route: 'line', path: '/line', icon: 'el-icon-map-location' },
        { name: '景区酒店', route: 'hotel', path: '/hotel', icon: 'el-icon-house' },
        { name: '旅游资讯', route: 'forum', path: '/forum', icon: 'el-icon-news' },
        { name: '我的收藏', route: 'favor', path: '/favor', icon: 'el-icon-star-off' },
        { name: '我的预定', route: 'order', path: '/order', icon: 'el-icon-s-order' }
      ]
    }
  },
  computed: {
    userInfo() {
      const userStr = localStorage.getItem('user_info')
      if (!userStr) return {}
      try {
        return JSON.parse(userStr)
      } catch (e) {
        return {}
      }
    },
    userAvatar() {
      return this.userInfo.avatar || ''
    }
  },
  methods: {
    toPage(name) {
      const path = name === 'index' ? '/' : `/${name}`
      this.$router.push(path)
    },
    toCenter() {
      this.$router.push("/center")
    },
    loginOut() {
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.localStorage.removeItem("user_info")
        window.localStorage.removeItem("user_token")
        this.$message({
          message: '退出成功',
          type: 'success'
        })
        setTimeout(() => {
          const currentLocation = window.location
          const loginUrl = `${currentLocation.protocol}//${currentLocation.hostname}${currentLocation.port ? ':' + currentLocation.port : ''}/login`
          window.location.href = loginUrl
        }, 500)
      }).catch(() => {})
    }
  },
  created() {
    // 监听用户信息更新
    window.addEventListener('storage', (e) => {
      if (e.key === 'user_info') {
        this.$forceUpdate()
      }
    })
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 70px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: 1400px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo-section {
  height: 60px;
  display: flex;
  align-items: center;
}

.logo-section img {
  height: 90%;
  object-fit: contain;
}

.nav-menu {
  display: flex;
  gap: 10px;
  height: 100%;
}

.nav-item {
  padding: 0 15px;
  height: 70px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #606266;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.nav-item i {
  margin-right: 4px;
  font-size: 16px;
}

.nav-item:hover {
  color: #409EFF;
  background-color: rgba(64, 158, 255, 0.1);
}

.nav-item.active {
  color: #409EFF;
  font-weight: 500;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #409EFF;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s ease;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.avatar:hover {
  transform: scale(1.1);
}

.el-button--danger {
  background-color: #F56C6C;
  border-color: #F56C6C;
}

.el-button--danger:hover {
  background-color: #f78989;
  border-color: #f78989;
}
</style>
